@extends('admin_system/public/layout')
@section('content')
    <script src="/admin/js/wangEditor.min.js"></script>

    @if($type==1)
        <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>添加!</strong> 订阅内容
        </div>
    @else
        <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>添加!</strong> 分享内容
        </div>
    @endif
    <form id="form" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="inputID" class="control-label">选择直播间:</label>
            <div class="">
                <select name="live_id" id="live_id" class="form-control">
                    @foreach($live as $k=>$v)
                        <option value="{{$v->id}}"> -- {{$v->live_title}} --</option>
                    @endforeach
                </select>
            </div>
        </div>
        @if($type==2)
            <div class="form-group">
                <label for="inputID" class="control-label">标题:</label>
                <div class="">
                    <input type="text" name="title" id="title" class="form-control" value="" required="required">
                </div>
            </div>
            <div class="form-group">
                <label for="inputID" class="control-label">描述:</label>
                <div class="">
                    <textarea type="text" id="description" name="description" class="form-control"
                              required="required"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label for="inputID" class="control-label">分享的封面:</label>
                <br>
                <img src="" id="preview" style="width: 13%">
                <hr>

                <div class="">
                    <input type="file" name="name" id="share_img" class="form-control" value="" title=""
                           required="required">
                </div>
            </div>
        @endif

        <input type="hidden" name="link_type" id="link_type" value="{{$type}}">
        <input type="hidden" id="token" value="{{csrf_token()}}">
        <div id="editor">

        </div>
        <hr>
        <div class="form-group">
            <div class="">
                <button type="submit" id="sub" style="width: 100%" class="btn btn-primary">保存</button>
            </div>
        </div>
    </form>
    <script>
        var E = window.wangEditor
        var editor = new E('#editor')
        editor.customConfig.uploadImgServer = '/admin_system/live/editor/img'
        editor.customConfig.uploadImgParams = {
            _token: document.getElementById('token').value   // 属性值会自动进行 encode ，此处无需 encode
        }
        editor.customConfig.uploadFileName = 'editor_img'

        editor.create();

        //监听input图片的变化
        var share_img = document.getElementById('share_img');
        var preview = document.querySelector('#preview');

        if (share_img != null) {
            share_img.addEventListener('change', function (e) {
                let file = e.target.files[0];
                let src = window.URL.createObjectURL(file);
                preview.setAttribute('src', src);
                console.log(src);
            })
        }

        //js提交
        let sub = document.getElementById('sub');
        let form = document.getElementById('form');

        window.addEventListener('submit', function (e) {
            e.preventDefault();

            let link_type = document.getElementById('link_type').value;
            if (link_type == 2) {
                var live_title = document.getElementById('title').value;
                var description = document.getElementById('description').value;
                var share_img = document.getElementById('share_img').files[0];
            }
            let live_id = document.getElementById('live_id').value;
            let content = editor.txt.html();
            let _token = document.getElementById('token').value;

            let data = {
                'live_id': live_id,
                'live_title': link_type == 2 ? live_title : '',
                'description': link_type == 2 ? description : '',
                'share_img': link_type == 2 ? share_img : '',
                'link_type': link_type,
                '_token': _token,
                'conten': content
            }

            let fd = new FormData();
            for (let index in data) {
                fd.append(`${index}`, data[index])
            }

            let xml = new XMLHttpRequest();
            xml.open('POST', '/admin_system/share/add_link', false)
            xml.upload.onprogress = function (e) {
                let total = e.total;
                let loaded = e.loaded;
                let pre = Math.round(loaded / total * 100) + '%';
                console.table(pre);
                console.log('ok');
            }
            xml.send(fd);
            if (xml.readyState == 4 && xml.status == 200) {
                var b = JSON.parse(xml.responseText).is_completed;
                if (b == 1) {
                    window.location.href = '/admin_system/live/list';
                }
                if (b == 0) {
                    window.location.href = '/admin_system/share/add_link/2';
                }
                console.log(b);
            }
            // window.location.href = '/admin_system/share/add_link/2';
        })

    </script>

@endsection































